<template>
  <div class="test-container">
    <div class="content-box">
      <div class="top">
        <div class="title">重庆市2024小车理论考试</div>
      </div>

      <div class="bottom-box">
        <div class="item-left">
          <div class="title-box">
            <div class="left">
              <div class="icon-box">
                <el-icon :size="30">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">科目一交规</div>
            </div>
          </div>

          <div class="center-four">
            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>
          </div>

          <div class="btn">
            <el-button color="#37b5f8" style="color: white; width: 300px; height: 46px; margin: 15px 0 30px 0; font-size: 20px">模拟考试</el-button>
          </div>
        </div>
        <div class="item-right">
          <div class="title-box">
            <div class="left">
              <div class="icon-box">
                <el-icon :size="30">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">科目四安全文明驾驶</div>
            </div>
          </div>

          <div class="center-four">
            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>

            <div class="item">
              <div class="icon-box">
                <el-icon :size="45">
                  <Edit />
                </el-icon>
              </div>
              <div class="title">
                <p>顺序练习</p>
                <p>按照顺序练习做题</p>
              </div>
            </div>
          </div>

          <div class="btn">
            <el-button color="#37b5f8" style="color: white; width: 300px; height: 46px; margin: 15px 0 30px 0; font-size: 20px">模拟考试</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.test-container {
  .content-box {
    width: 1200px;
    height: 455px;
    margin: 60px auto;

    .top {
      margin-bottom: 40px;
      .title {
        width: 1200px;
        font-size: 30px;
        margin-top: -20px;
        line-height: 41px;
        padding: 0 45px;
        background-color: #fff;
        text-align: center;
      }
    }

    .bottom-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-left {
        width: 580px;
        background-color: white;
        border: 1px solid #e9e9e9;

        .title-box {
          width: 100%;
          height: 110px;

          .left {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 110px;
            .icon-box {
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              font-size: 20px;
              padding-left: 8px;
            }
          }
        }

        .center-four {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-evenly;

          .item {
            width: 250px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            padding: 15px 0 15px 35px;
            margin-bottom: 15px;
            .icon-box {
              width: 45px;
              height: 45px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              p:nth-child(1) {
                width: 64px;
                font-size: 16px;
                color: #333333;
              }

              p:nth-child(2) {
                width: 165px;
                font-size: 16px;
                color: #999999;
              }
            }
          }
        }

        .btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .item-right {
        width: 580px;
        background-color: white;
        border: 1px solid #e9e9e9;

        .title-box {
          width: 100%;
          height: 110px;

          .left {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 110px;
            .icon-box {
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              font-size: 20px;
              padding-left: 8px;
            }
          }
        }

        .center-four {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-evenly;

          .item {
            width: 250px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            padding: 15px 0 15px 35px;
            margin-bottom: 15px;
            .icon-box {
              width: 45px;
              height: 45px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              p:nth-child(1) {
                width: 64px;
                font-size: 16px;
                color: #333333;
              }

              p:nth-child(2) {
                width: 165px;
                font-size: 16px;
                color: #999999;
              }
            }
          }
        }

        .btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
